<template>
	<!-- 20221104 -->
	<view class="block-nav-icon-cn radius-20 bg-ff">
		<!-- 组件内容 -->
		<view class="cn-content">
			<!-- 标题 -->
			<view class="line-height-100 padding-lr-30 text-36 text-bold">
				{{title}}
			</view>
			<!-- 导航组 -->
			<view class="flex align-center flex-wrap margin-top-40">
				<view class="margin-bottom-30 width-33p flex flex-direction align-center" v-for="(item,index) in list"
					:key="index" @click="go(item.url)">
					<view class="nav-image text-center radius-50p" :style="'background:'+item.bg_color+';'">
						<text class="line-height-100" :class="item.icon"
							:style="'color:'+item.color+'; font-size:'+item.size+'rpx;'"></text>
					</view>

					<text class="margin-top-15 text-28 text-4d text-cut-one">{{item.name}}</text>
				</view>
			</view>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 显示列表
			list: {
				type: Array,
				default: []
			},
			// 标题
			title: {
				type: String,
				default: '我的服务'
			}
		},

		methods: {

		}
	}
</script>

<style scoped>
	.nav-image {
		width: 100rpx;
		height: 100rpx;
	}
</style>
